<nz-card [nzActions]="[userProfileTpl,userPwdEditTpl,userAvatarUploadTpl,exitSysTpl]" [nzBordered]="false"
  class="app-user-profile-card">

  <div class="app-user-profile">
    <div class="app-user-avatar">
      <img [src]="userAvatar" appErrorSrc [errSrc]="'assets/platform/img/default-avatar.png'">
    </div>
    <div class="app-user-info">
      <div class="app-user-real-name">{{userData?.realName}}</div>
      <div class="app-user-item" nz-tooltip [nzTooltipTitle]="userData?.telephone || '无'">电话：{{userData?.telephone || '无'}}</div>
      <div class="app-user-item" nz-tooltip [nzTooltipTitle]="userData?.email || '无'">邮箱：{{userData?.email || '无'}}</div>
    </div>
  </div>

  <ng-template #userProfileTpl>
    <i nz-icon nzType="user" nz-tooltip nzTooltipTitle="个人资料" (click)="userInfo()"></i>
  </ng-template>
  <ng-template #userPwdEditTpl>
    <i nz-icon nzType="key" nz-tooltip nzTooltipTitle="修改密码" (click)="updatePwd()"></i>
  </ng-template>
  <ng-template #userAvatarUploadTpl>
    <i nz-icon nzType="cloud-upload" nz-tooltip nzTooltipTitle="头像上传" (click)="userAvatarCropperVisible=true"></i>
  </ng-template>
  <ng-template #exitSysTpl>
    <i nz-icon nzType="logout" nz-tooltip nzTooltipTitle="退出系统" (click)="exitSys()"></i>
  </ng-template>

  <app-img-cropper-modal #userAvatarImgCropper [(visible)]="userAvatarCropperVisible"
    (imgUpload)="userAvatarUpload($event)" [title]="'头像上传'" [previewTitle]="'头像预览'" [originalImgLabel]="'原头像'"
    [originalImgSrc]="userAvatar"></app-img-cropper-modal>
</nz-card>